<style>

    .media{

        margin-bottom: 10px;
        border-bottom: 1px dashed #ccc;
        padding: 10px;

    }
    .media .speci-lists{

        width: 100%;
        height: auto;
        border: 1px solid #ccc;
        position: relative;
        bottom: -10px;
        display: none;
        background: #fff;
        z-index: 9;
        padding: 5px;
        margin-bottom: 10px;

    }
    .media .speci-lists ul{

        width: auto;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: auto;
        white-space: nowrap;

    }
    .media .speci-lists ul li{

        width: 130px;
        height: auto;
        border-right: 1px dashed #ccc;
        display: inline-block;
        padding: 0 5px;

    }
    .media .speci-lists ul li:first-child{

        border-left: 1px dashed #ccc;

    }
    .media .speci-lists ul li .thumb{

        width: 100%;
        height: 80px;
        margin-bottom: 10px;

    }
    .media .speci-lists ul li .thumb img{

        width: 100%;
        height: 100%;

    }
    .media .speci-lists ul li .goods-spec{

        font-size: 14px;
        font-weight: bold;
        color: #888;

    }
    .media .speci-lists ul li .goods-spec strong{

        color: #448944;

    }
    .media .bar{

        width: 100%;
        height: 30px;
        background: #efefef;
        padding: 5px;
        margin-bottom: 5px;

    }
    .media .bar .btn{

        margin-left: 5px;

    }
    .status_bar{

        width: 100%;
        margin-bottom: 10px;
        background: #efefef;
        padding: 5px;
        margin-bottom: 5px;

    }
    .media-object{

        width: 64px;
        height: 64px;

    }
    .media-body{
        height: 64px;
    }
    .goods-title{

        width: 100%;
        overflow: hidden;
        height: 50%;
        font-size: 12px;
        font-weight: bold;

    }
    .media-body{
        vertical-align: middle;
    }
    .speci-lists .triangle{
        display: block;
        border-color: transparent transparent #ccc;
        border-style: dashed dashed solid;
        border-width: 0 9px 9px;
        width: 0;
        height: 0;
        line-height: 0;
        position: absolute;
        left: 18px;
        top: -9px;
    }
    .triangle i{
        border-color: transparent transparent #fff;
        border-style: dashed dashed solid;
        border-width: 0 7px 7px;
        width: 0;
        height: 0;
        line-height: 0;
        position: absolute;
        left: -7px;
        top: 2px;
        z-index: 2;
    }
</style>
<div class="status_bar">
    <select id="categorys" class="form-control radius-none" style="width: 200px;">
        <option value="0">全部分类</option>
        <?php echo $category_tree?>
    </select>
</div>
<?php if($data):?>
    <div class="status_bar">
        <div class="btn-group btn-group-xs" role="group">
            <button class="btn btn-default radius-none all-select" type="button">全选</button>
            <button class="btn btn-default radius-none all-not-select" type="button">全不选</button>
        </div>
        <div class="btn-group btn-group-xs" role="group">
            <?php if($status != 1):?>
                <button class="btn btn-success radius-none all-up" type="button">上架</button>
            <?php endif;?>
            <?php if($status != 4 && $status != 2):?>
                <button class="btn btn-default radius-none all-down" type="button">下架</button>
            <?php endif;?>
        </div>
        <?php if($status != 4):?>

            <div class="btn-group btn-group-xs" role="group">
                <a class="btn btn-danger btn-xs delete radius-none pull-right" href="javascript:;">删除</a>
            </div>
        <?php endif;?>
    </div>
    <?php foreach($data as $v):?>

        <div class="media goods_<?php echo $v['id']?>" style="padding: 5px 0">
            <div class="bar">
                <input type="checkbox" value="<?php echo $v['id']?>">
                <span>商品ID: <?php echo $v['id']?></span>
                <a class="btn btn-default btn-xs edit radius-none pull-right update" data-id='<?php echo $v['id']?>' href="javascript:;">编辑</a>
            </div>
            <div class="media-left">
                <img class="media-object" style="" src="<?php echo cutUrl($v['goods_extend']['thumb'],65,65)?>" width="64" height="64" data-holder-rendered="true">
            </div>
            <div class="media-body">
                <div class="media-body">

                    <div class="media-body">
                        <div class="goods-title">
                            <?php echo $v['title']?>
                        </div>
                        <div class="goods-bar">
                            <a data-id="<?php echo $v['id']?>" data-spec=<?php echo json_encode($v['spec'])?> data-load=true class="btn btn-default btn-xs radius-none show-speci" href="javascript:;" style="margin-top: 10px">
                                <span class="fa fa-plus-square-o"></span>&nbsp;查看规格商品
                            </a>
                        </div>
                    </div>
                    <div class="media-body">
                        <div class="media-body text-center">
                            (默认价格)
                            <br />
                            <strong class="red">
                                &yen;<?php echo sprintf("%.2f", ($v['goods_extend']['goods_price'] / 100))?>
                            </strong>
                        </div>
                        <div class="media-body text-center">
                            (总库存)
                            <br>
                            <strong class="green"><?php echo $v['storage_total']?></strong>件
                        </div>
                        <div class="media-body text-center">
                            (发布时间)
                            <br>
                            <strong><?php echo date('Y-m-d H:i:s',$v['publish_time'])?></strong>
                        </div>
                        <div class="media-body text-center status_<?php echo $v['id']?>">

                            <?php if($v['goods_state'] == 0):?>

                                <span class="red">仓库中</span>

                            <?php elseif($v['goods_state'] == 1 && $v['publish_time'] < NOW_TIME):?>

                                <span class="green">出售中</span>

                            <?php elseif($v['goods_state'] == 2):?>

                                <span class="red">已删除</span>

                            <?php else:?>

                                <span class="orange">待发布</span>

                            <?php endif;?>

                        </div>
                    </div>
                </div>
            </div>
            <div class="speci-lists">
                <div class="triangle">
                    <i></i>
                </div>
                <ul>
                    <!--<li>-->
                        <!--<div class="thumb">-->
                            <!--<img style="" src="/upload/image/20160409/1460187584000455_150_80.jpg" width="150" height="80" data-holder-rendered="true">-->
                        <!--</div>-->
                        <!--<div class="goods-spec">-->
                            <!--颜色: <strong>白色</strong>-->
                        <!--</div>-->
                        <!--<div class="goods-spec">-->
                            <!--尺码: <strong>XXXL</strong>-->
                        <!--</div>-->
                        <!--<div class="goods-spec">-->
                            <!--价格: <strong class="red">&yen;13.00</strong>-->
                        <!--</div>-->
                        <!--<div class="goods-spec">-->
                            <!--库存: <strong class="green">4543432</strong>-->
                        <!--</div>-->
                    <!--</li>-->
                </ul>
            </div>
        </div>

    <?php endforeach;?>
    <div role="group" data-total="<?php echo $total?>" data-page="<?php echo $page?>" data-nums="<?php echo $nums?>" data-src="<?php echo U('Admin/Goods/Goods/lists');?>"  class="btn-group" id="_pages"></div>
<?php else:?>
    <h1 style="font-size: 20px;text-align: center;margin-top: 20px;font-weight: bold">没有找到符合要求的数据!</h1>
<?php endif;?>
<script>
$(function(){

    var options = {

        category_id: '<?php echo $category_id?>',
        status: '<?php echo $status?>'

    }

    Admin.pages(options);

    //修改商品
    $('.update').unbind('click');
    $('.update').click(function(){

        var id = $(this).data('id');

        showMessage('','',"<?php echo U('Admin/Goods/Goods/update');?>",{'id':id,'page': "<?php echo $page?>",category_id: '<?php echo $category_id?>',status: '<?php echo $status?>'},0);

    });

    //选择分类
    $('select#categorys').unbind('change');
    $('select#categorys').change(function(){

        options.category_id = $(this).val();

        showMessage('','',"<?php echo U('Admin/Goods/Goods/lists');?>",options,0);

    });

    $('#main-content').undelegate('.show-speci','click');

    $('#main-content').delegate('.show-speci','click',function(){

        var isload = $(this).data('load');

        $('.show-speci').not($(this))
                .children('span')
                .removeClass('fa-minus-square-o')
                .removeClass('fa-plus-square-o')
                .addClass('fa-plus-square-o');

        if(isload){

            var goods_id = $(this).data('id');

            var spec = $(this).data('spec');

            loadSpec(goods_id,spec,$(this));

        }

        var $speci = $(this)
                .parent()
                .parent()
                .parent()
                .parent()
                .next();

        $('.speci-lists').not($speci).hide();

        if ($speci.is(':hidden')) {

            $speci.show();
            $(this)
                    .children('span')
                    .removeClass('fa-plus-square-o')
                    .addClass('fa-minus-square-o');

        } else {

            $speci.hide();
            $(this)
                    .children('span')
                    .removeClass('fa-minus-square-o')
                    .addClass('fa-plus-square-o');

        }

    });


    //加载规格商品
    function loadSpec(goods_id,spec,_this) {

        layer.load();


        var _this_ul = _this
                            .parent()
                            .parent()
                            .parent()
                            .parent()
                            .next()
                            .children('ul');

        $.post('<?php echo U("Admin/Goods/Goods/getSpecLists")?>',{'goods_id': goods_id},function(result){

            layer.closeAll();

            _this.data('load',false);

            for ( var i in result ) {


                var str = '';

                str += '<li>\
                            <div class="thumb">\
                                <img style="" src="'+ cutUrl(result[i].thumb,150,80) +'" width="150" height="80" data-holder-rendered="true">\
                            </div>';


                if ( result[i].goods_attr_val_ids != '' ) {

                    var gavi = result[i].goods_attr_val_ids.split(',');


                    for ( var idx in spec) {

                        for (var idnx in spec[idx].attr_val) {

                            if(gavi.indexOf(spec[idx].attr_val[idnx].attr_val_id) > -1) {

                                str += '\
                                        <div class="goods-spec">\
                                                '+  spec[idx].attr.attr_name +': <strong>'+ spec[idx].attr_val[idnx].attr_val_name +'</strong>\
                                        </div>';

                            }

                        }

                    }



                } else {


                    str += '\
                            <div class="goods-spec">\
                                    <strong>无规格</strong>\
                            </div>';


                }

                var alarm = '';

                if(
                        (Number(result[i].goods_storage_alarm) > 0 && Number(result[i].goods_storage) < Number(result[i].goods_storage_alarm))
                        ||
                        (!Number(result[i].goods_storage_alarm) && Number(result[i].goods_storage) < 10)
                ){
                    alarm = '<span class="red">(库存不足)</span>'
                }



                str += '\
                        <div class="goods-spec">\
                                价格: <strong class="red"> &yen;'+ (result[i].goods_price / 100).toFixed(2) +'</strong>\
                        </div>\
                        <div class="goods-spec">\
                                库存: <strong>'+ result[i].goods_storage + alarm +'</strong>\
                        </div>';

                str += '</li>';

                _this_ul.append(str);

            }



        })


    }

    //全选
    $('.all-select').unbind('click');
    $('.all-select').click(function(){


        $('.bar input[type="checkbox"]').prop('checked',true);

    });
    //全不选
    $('.all-not-select').unbind('click');
    $('.all-not-select').click(function(){


        $('.bar input[type="checkbox"]').prop('checked',false);

    });

    //批量处理
    $('.all-up,.all-down').unbind('click');
    $('.all-up,.all-down,.delete').click(function(){

        var $checked = $('.bar input[type="checkbox"]:checked');

        if($checked.length < 1){

            layer.msg('至少选择一个!');

            return false;

        }

        var ids = [];

        $checked.each(function(){

            ids.push($(this).val());

        });

        if($(this).hasClass('all-up'))
            var action = 'up';

        if($(this).hasClass('all-down'))
            var action = 'down';

        if($(this).hasClass('delete'))
            var action = 'delete';

        $.post("<?php echo U('Admin/Goods/Goods/updateStatus')?>",{'action':action,'ids':ids},function(result){

            if (result.code == 200) {

                for (var i in ids) {

                    if(action == 'up'){

                        if ( "<?php echo $status?>" == 4 || "<?php echo $status?>" == 2 || "<?php echo $status?>" == 3){

                            $('.goods_'+ids[i]).fadeOut(200,function(){

                                $(this).remove();

                            });

                        } else {

                            $('.status_'+ids[i]).html('<span class="green">出售中</span>');

                        }

                    } else if ( action == 'down' ) {

                        if ( "<?php echo $status?>" == 1 ){

                            $('.goods_'+ids[i]).fadeOut(200,function(){

                                $(this).remove();

                            });

                        } else {

                            $('.status_' + ids[i]).html('<span class="red">仓库中</span>');
                        }

                    } else if ( action == 'delete' ) {

                        $('.goods_'+ids[i]).fadeOut(200,function(){

                            $(this).remove();

                        });

                    }

                }

            }

            showMessage(result.msg,result.code,'','',2000);

        });


    });

});
</script>
